import { Tooltip } from 'antd';
import { useMemo } from 'react';
import type { FormatValue } from './CoordinateTrans';
import styles from './index.module.less';
import { Format, getFormatStr, getNextFormat } from './weapon';

type FormatChangeProps = {
  showFormat: FormatValue;
  onFormatChange: (format: FormatValue) => void;
};

const FormatChange = (props: FormatChangeProps) => {
  const { showFormat, onFormatChange } = props;

  const getSample = useMemo(() => {
    if (showFormat === Format.STAR) {
      return `例：113.27 23.13 或 113.27,23.13`;
    }
    if (showFormat === Format.DDD) {
      return `例：120.270000`;
    }
    if (showFormat === Format.DMS) {
      return `例：120 30 30.00 E`;
    }
    if (showFormat === Format.DM) {
      return `例：120 30.2000 E`;
    }
    if (showFormat === Format.NWSE) {
      return `例：E 113°16′12.00″`;
    }
    return `例：${120},${30}`;
  }, [showFormat]);

  return (
    <Tooltip title={getSample} placement="top" trigger={['hover']}>
      <div
        className={styles.switch}
        onClick={() => {
          onFormatChange?.(getNextFormat(showFormat));
        }}
      >
        {getFormatStr(showFormat)}
      </div>
    </Tooltip>
  );
};

export default FormatChange;
